<template>
  <div>
    <div class="header">
      <img src="../assets/images/fanhui.png" height="23" alt="" @click="back"/>
      <div>商品订单</div>
    </div>

    <div class="search">
      <van-search show-action placeholder="关键字查询">
        <template #action>
          <div style="color: #1f3695">搜索</div>
        </template>
      </van-search>
    </div>

    <van-tabs v-model="active" @click="onClick">
      <van-tab title="全部"> </van-tab>
      <van-tab title="待发货"> </van-tab>
      <van-tab title="待收货"> </van-tab>
      <van-tab title="待评价"> </van-tab>
    </van-tabs>
    <div class="box">
      <div v-if="bool" style="padding: 100px 100px">
        <img src="../assets/images/暂无消息.png" alt="" />
        <p style="text-align: center">暂无消息</p>
      </div>
      <div v-else class="box-goodlist">
        <Goodlist
          :goodslist="item"
          v-for="(item, index) in records"
          :key="index"
          @model="addmodel"
        />
      </div>
    </div>
    <div class="model" v-show="model">
      <div class="model_bg" @click="model = false"></div>
      <div class="dialog">
        <div class="dialog_top">是否确认收货?</div>
        <div class="dialog_dowm">
          <button @click="model = false">取消</button>
          <button @click="deFine">确认收货</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  SHDquanbu,
  SHDdaifahuo,
  SHDdaishouhuo,
  SHDdaipingjia,
  ConfirmReceipt
} from "../request/api";
import Goodlist from "../components/component/goodlist";
export default {
  components: {
    Goodlist,
  },
  methods: {  
    back(){
     this.$router.back() 
    },
    deFine(){
      let serialNo = this.id
      ConfirmReceipt(
        serialNo
      ).then(res=>{
         if(res.errCode==0){
                this.$toast.success('收货成功');
                this.onBtn1();
          }       
      })
      this.model=false
    },
    addmodel(id){
      this.model=true,
      this.id=id
    },
    onClick(name) {
      if (name == 0) {
        this.onBtn1();
      } else if (name == 1) {
        this.onBtn2();
      } else if (name == 2) {
        this.onBtn3();
      } else {
        this.onBtn4();
      }
    },

    //送货单/全部
    onBtn1() {
      SHDquanbu({
        current: 1,
        size: 10,
        keyword: "",
      }).then((res) => {
        let { records } = res.data;
        this.records = records;
        console.log(res);
        if (records.length !== 0) {
          this.bool = false;
        } else {
          this.bool = true;
        }
      });
    },
    //送货单/待发货
    onBtn2() {
      SHDdaifahuo({
        current: 1,
        size: 5,
        keyword: "",
      }).then((res) => {
        let { records } = res.data;
        this.records = records;
        if (records.length !== 0) {
          this.bool = false;
        } else {
          this.bool = true;
        }
      });
    },
    //送货单/待收货
    onBtn3() {
      SHDdaishouhuo({
        current: 1,
        size: 5,
        keyword: "",
      }).then((res) => {
        let { records } = res.data;
        this.records = records;
        if (records.length !== 0) {
          this.bool = false;
        } else {
          this.bool = true;
        }
      });
    },
    //送货单/待评价
    onBtn4() {
      SHDdaipingjia({
        current: 1,
        size: 5,
        keyword: "",
      }).then((res) => {
        let { records } = res.data;
        this.records = records;
        console.log(this.daipingjia);
        if (records.length !== 0) {
          this.bool = false;
        } else {
          this.bool = true;
        }
      });
    },
  },
  data() {
    return {
      active: 0,
      //全部
      records: [],
      bool: true,
      model: false,
      id:''
    };
  },
  created() {
    this.onBtn1();
  },
};
</script>
 
<style lang = "less" scoped>
.model {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  .model_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .dialog {
    width: 260px;
    height: 125px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -88px;
    border-radius: 10px;
    overflow: hidden;
    .dialog_top {
      width: 100%;
      height: 81px;
      line-height: 81px;
      text-align: center;
      border-bottom: 1px solid #dedede;
    }
    .dialog_dowm {
      height: 44px;
      width: 100%;
      background-color: #dedede;
      display: flex;
      justify-content: space-between;
      button {
        display: block;
        width: 49.9%;
        border: none;
        background-color: #fff;
        &:nth-of-type(2) {
          color: #4287ff;
        }
      }
    }
  }
}
* {
  padding: 0;
  margin: 0;
}

.header {
  width: 100vw;
  height: 64px;
  background: #003399;
  display: flex;
  color: #fff;
  font-size: 22px;
  padding: 25px 10px;
  box-sizing: border-box;
  img {
    margin-top: 3px;
    margin-right: 120px;
  }
}
.van-search__content {
  border-radius: 20px;
}
/deep/.van-tabs__line {
  background-color: #f2cb45;
}
.search {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}
</style>